<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        .red{
            color: red;
            font-size: large;
        }
        .bgGreen{
            background-color: green;
        }
    </style>
</head>
    
<body>
    <div id="test">
        <div>{{vdata}}</div>
        <input type="text" v-model="vmodel">{{vmodel}}
        <div v-for="key in vfor">
            phone:{{key.a}}<br>
            CEO:{{key.b}}<br>
            <div v-for="list of key.list">{{list}}</div>
        </div>
        
        <div v-bind:class="{red:vbind.red>0,bgGreen:vbind.bgGreen<0}">我的v-bind</div>
        <div @click="von">打我</div>
    </div>
</body>
</html>

<script src="./dist/main.js"></script>
<script>
    let dm = new Due({
        el:"#test",
        data:{
            vdata:"hello due",
            vmodel:"v-model",
            vfor:[{
                a:"小米",
                b:"雷军",
                list:["XiaoMi 4","XiaoMi MIX2S"]
            },{
                a:"华为",
                b:"任正非",
                list:["荣耀"]

            }],
            vbind:{
                red:23,
                bgGreen:-4
            },
           
        },
        methods:{
            von(){
                console.log("好痛！！！");
            }
        },
        created(){
            console.log(this+"创建完成！！！");
        }
    })
    console.log(dm);
</script>
